<template>
  <el-dialog title="修改用户信息" :visible.sync="dialogVisible" width="48%">
    <!-- 表单区域 -->
    <el-form ref="formRef" :model="addUserForm" label-width="80px" :rules="formRules">
      <el-form-item label="用户名">
        <el-input v-model="addUserForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model="addUserForm.mobile"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data: function () {
    return {
      // 用于控制对话框显隐
      dialogVisible: false,
      addUserForm: {},
      // 表单校验规则
      formRules: {}
    }
  },
  methods: {
    // 查询用户信息
    queryUserInfo: async function (id) {
      const res = await this.$http.get(`users/${id}`)
      if (res.meta.status !== 200) {
        this.$message.warning('用户信息查询失败')
      }
      this.addUserForm = res.data
      this.formRules = this.$parent.$refs.addUser.formRules
    },
    // 点击确认，修改用户信息
    confirm: async function () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.put(`users/${this.addUserForm.id}`, {
          email: this.addUserForm.email,
          mobile: this.addUserForm.mobile
        })
        if (res.meta.status !== 200) {
          this.$message.warning('更新失败')
        }
        this.$message.success('更新成功')
        this.$parent.getUserList()
        this.dialogVisible = false
      })
    }
  }
}
</script>
